﻿@model IEnumerable<VacationsRequest.Models.EmployeeVacationDetails>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Employee Vacations</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/datepicker.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datepicker.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

<script type="text/javascript">

    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //Months are zero based
    var curr_year = d.getFullYear();

    var holidays;

    $(document).ready(function () {

        $.ajax({
            type: "GET",
            contentType: "application/json",
            data: "{}",
            url: '/VacationDays/VacationsListJson/?id=@ViewBag.CurrentEmployee.ID&type=@ViewBag.Type',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                holidays = data;

                $('#date3').DatePicker({
                    flat: true,
                    date: [],
                    current: curr_year + "-" + curr_month + "-" + curr_date,
                    calendars: 3,
                    mode: 'single',
                    onRender: function (date) {
                        var dateStr = date.getFullYear() + "" + (date.getMonth() + 1) + "" + date.getDate();
                        return {
                            className: ($.inArray(dateStr, holidays) != -1) ? 'holiday' : false
                        }
                    },
                    starts: 1,
                    onChange: function (formated, dates) {
                        $('.fromDate').val(formated[0]);
                        $('.toDate').val(formated[1]);
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                debugger;
            }
        });

    });

</script>

</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <img src="../../Content/images/outcoding.png" />
            </div>
        </header>
        <section id="main">
            <br />
            <br />
            <br />
            <br />
            <h2>@ViewBag.ReportType @ViewBag.CurrentEmployee.FirstName @ViewBag.CurrentEmployee.FirstLastName
                @ViewBag.CurrentEmployee.SecondLastName</h2>
            <p>
                @using (Html.BeginForm("VacationsListPartial", "VacationDays", FormMethod.Get))
                {   
                    <p>
                        Year: @Html.DropDownList("yearString", "All")
                        @Html.Hidden("type")
                        <input type="submit" value="Filter" /></p>
                }
            </p>
            <p><div id="date3">
                    </div></p>
            <table>
                <tr>
                    <th>
                        Date
                    </th>
                    <th>
                        Comment
                    </th>
                    <th>
                        Approval Status
                    </th>
                    <th>
                        Approval Date
                    </th>
                </tr>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.VacDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Comment)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Status)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ApprovalDate)
                        </td>
                    </tr>
                }
            </table>
        </section>
    </div>
</body>
</html>
